<template>
	<rui-pages :hHeight="180">
		<rui-card title="通用设置" :top="-150">
			<view class="seting">
				<view class="item">
					<view class="label">
						自动查询二次
					</view>
					<view class="value">
						<switch :checked="form.is_search_2?true:false" color="#FFCC33" style="transform:scale(0.8)"
							@change="onSearch" />
					</view>
				</view>
				<view class="item">
					<view class="label">
						儿童年龄
					</view>
					<view class="value">
						<input type="text" v-model="form.children_age" placeholder="请输入儿童年龄" class="input"
							name="et_access">
					</view>
				</view>

				<view class="item">
					<view class="label">
						老人年龄
					</view>
					<view class="value">
						<input type="text" v-model="form.old_age" placeholder="请输入老人年龄" class="input" name="et_access">
					</view>
				</view>
			</view>
			<view class="tips">
				温馨提示：仅Pro会员设置有效，普通会员无需设置。
			</view>
		</rui-card>
		<rui-card title="ET账号" desc="仅用于ET系统查询二次">
			<view class="seting">
				<view class="item">
					<view class="label">
						账号
					</view>
					<view class="value">
						<input type="text" v-model="form.et_name" placeholder="请输入账号" class="input" name="et_access">
					</view>
				</view>
				<view class="item">
					<view class="label">
						密码
					</view>
					<view class="value">
						<input type="password" v-model="form.et_password" placeholder="请输入密码" class="input"
							name="et_password">
					</view>
				</view>

				<view class="item">
					<view class="label">
						效验账号
					</view>
					<view class="value" style="display: flex;align-items: center;">
						<view style="margin-right: 20rpx;font-size: 24rpx;color: #f30;">
							{{is_et_verify ? '已效验':'未效验'}}
						</view>
						<view class="btn" @click="onVerify">
							立即效验
						</view>
					</view>
				</view>
			</view>

			<view class="tips">
				温馨提示：{{tips_msg}}
			</view>
		</rui-card>
		<view style="margin: 20rpx;">
			<rui-button title="保存设置" @click="submit"></rui-button>
			<button class="logout" @click="logout">退出登录</button>
		</view>
	</rui-pages>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from "vue";
	import {
		getSetingInfo,
		setSetingInfo,
		checkEtLogin
	} from "@/common/api.js"

	import user from "@/common/user";


	let form = ref({
		is_search_2: 0,
		children_age: 15,
		old_age: 65,
		et_name: "",
		et_password: ""
	})
	
	let is_et_verify = ref(false)

	let tips_msg = ref("校验账号每月限制5次，请填写正确账号。")

	onMounted(() => {
		getSetingInfo().then(res => {
			form.value = res.data.data;
			tips_msg.value = res.data.et_msg
			is_et_verify.value = res.data.is_et_verify
		})
	})
	const submit = () => {
		setSetingInfo({
			is_search_2: form.value.is_search_2 || 0,
			et_name: form.value.et_name || '',
			et_password: form.value.et_password || '',
			children_age: form.value.children_age || 0,
			old_age: form.value.old_age || 0,
		}).then(res => {
			uni.$rui.toast('保存成功')
		})
	}

	const onVerify = () => {
		if (is_et_verify.value) {
			uni.$rui.toast('已效验，不支持重复效验');
			return false;
		}
		checkEtLogin({
			et_name: form.value.et_name,
			et_password: form.value.et_password
		}).then(res => {
			tips_msg.value = res.msg;
			is_et_verify.value = true;
		})
	}

	const onSearch = e => {
		form.value.is_search_2 = e.detail.value ? 1 : 0
		submit()
	}

	const logout = () => {
		uni.removeStorage({
			key: "UserToken",
		})
		user.logout();

		uni.$rui.toast('退出成功', () => {
			uni.reLaunch({
				url: "/pages/index/index"
			})
		})

	}
</script>

<style lang="scss">
	.logout {
		margin-top: 30rpx;
	}

	.tips {
		margin-top: 30rpx;
		margin-bottom: 10rpx;
		font-size: 24rpx;
		color: #f30;
	}

	.btn {
		color: #fff;
		border-radius: 10rpx;
		font-size: 24rpx;
		padding: 12rpx 20rpx;
		height: 30rpx;
		line-height: 30rpx;
		box-shadow: 0rpx 5rpx 15rpx rgba(0, 0, 0, .2);
		background-image: linear-gradient(to right, #907fd8, #3165cc);
		text-align: center;
	}

	.seting {
		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #eee;
			padding: 20rpx 0;
			width: 100%;

			.item:last-child {
				border-bottom: none;
				padding-bottom: 0;
			}

			.value {
				// width: calc(100% - 150rpx);
				text-align: right;

				.input {
					text-align: right;
					width: 100%;
				}
			}

		}
	}
</style>